<include file="public@header"/>
</head>
<body>
<div class="wrap">
    <div class="row">
        <div class="panel panel-default col-sm-6">
            <div class="panel-heading">
                <h3 class="panel-title">订单</h3>
            </div>
            <div class="panel-body home-info" id="order" style="height: 300px"></div>
        </div>

        <div class="panel panel-default col-sm-5">
            <div class="panel-heading">
                <h3 class="panel-title">包裹</h3>
            </div>
            <div class="panel-body home-info" id="receipt" style="height: 300px"></div>
        </div>

        <div class="panel panel-default col-sm-12">
            <div class="panel-heading">
                <h3 class="panel-title">会员</h3>
            </div>
            <div class="panel-body home-info" id="user" style="height: 300px"></div>
        </div>
    </div>
</div>
<script src="__STATIC__/js/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    echarts.init(document.getElementById('user')).setOption({
        xAxis: {
            type: 'category',
            data: {$date}
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: {$user},
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(110, 110, 110, 0.5)'
            }
        }]
    });

    // 订单图标
    echarts.init(document.getElementById('order')).setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
            data: {$type}
        },
        series: [
            {
                name: '历史累计',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: {$order}
            }
        ]
    })

    // 包裹视图
    echarts.init(document.getElementById('receipt')).setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: {$type_receipt}
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: {$order_receipt},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
</script>
</body>